import { animate, motion, useMotionTemplate, useMotionValue } from 'framer-motion'
import { useEffect } from 'react'
import { colors, contributors } from '../../model/const'
import styles from './PageFooter.module.scss'

export const PageFooter = () => {
  const color = useMotionValue(colors[0])
  const backgroundImage = useMotionTemplate`radial-gradient(95% 95% at 50% 0%, #f1ecff 50%, ${color})`

  useEffect(() => {
    animate(color, colors, {
      duration: 10,
      ease: 'easeOut',
      repeat: Infinity,
      repeatType: 'mirror',
    })
  }, [])

  return (
    <motion.footer className={styles.footer} style={{ backgroundImage }}>
      <h4 className={styles['footer-title']}>
        Проект разрабатывается энтузиастами из <span>Jungle.dev</span>
      </h4>
      <div className={styles['footer-wrapper']}>
        <ul className={styles['contributors-list']}>
          {contributors.map((contributor) => (
            <li className={styles['contributors-item']} key={contributor.name}>
              <a href={contributor.github}> {contributor.name}</a>
            </li>
          ))}
        </ul>
      </div>
      <div className={styles.copy}>2024 ChillTodo | Jungle.dev</div>
    </motion.footer>
  )
}
